<!--
 * @Description: 宣传视频
 * @Author: Ronda
 * @Date: 2020-06-19 14:12:44
 * @LastEditors: 李洋洋
 * @LastEditTime: 2021-07-18 09:18:50
-->
<template>
  <div id="body">
    <!-- 宣传视频的测试的结果 -->

    <div id="video">
      <el-button
        id="el-button1"
        type="success"
        plain
        icon="el-icon-arrow-left"
        size="mini"
        round
        @click="changeSub"
      ></el-button>
      <video :src="videos[a]" controls autoplay></video>

      <el-button id="el-button2" type="success" plain size="mini" round
        ><i class="el-icon-arrow-right el-icon--right" @click="changeAdd"></i
      ></el-button>
    </div>

    <div class="box">
      <div class="picture">
        <el-carousel :interval="4000" type="card" height="500px">
          <el-carousel-item v-for="item in url" :key="item">
            <img class="pic" :src="item" height="500px" width="900px" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 0,
      url: [
        "http://news.cjn.cn/sywh/202003/W020200306282483748074.png",

        "http://news.cjn.cn/sywh/202003/W020200306282485590130.jpeg",
        "http://news.cjn.cn/sywh/202003/W020200306282486187768.jpeg",
        "http://news.cjn.cn/sywh/202003/W020200306282487005314.jpeg",
      ],
      videos: [
        "http://120.53.125.221:8181/uploadimg/F01EC49E9E432021ECDB929BB3DE8129.mp4",
        "http://120.53.125.221:8181/uploadimg/5BF6414949C9462F7FB2281B2C485C27.mp4",
        "http://120.53.125.221:8181/uploadimg/A55626F2CF8A8BDD9C69E36E4C04DD2A.mp4",
        "http://120.53.125.221:8181/uploadimg/075F2260244602EF93FD2E1F8D49FFFA.mp4",
      ],
    };
  },
  computed: {},
  methods: {
    handleClick() {
      alert("button click");
    },
    changeAdd() {
      if (this.a < this.videos.length - 1) {
        this.a++;
      }
    },
    changeSub() {
      if (this.a > 0) {
        this.a--;
      }
    },
  },

  created() {},
  mounted() {},
};
</script>
<style scoped>
#choose {
  height: 20px;
  width: 500px;
  border: 0 100px 0 auto;
}
.picture {
  width: 100%;
  float: left;
  border: 0 100px;
}
#el-button1 {
  position: relative;
  top: -300px;
  left: -40px;
}
#el-button2 {
  position: relative;
  top: 280px;
  right: 100px;
  float: right;
}
video {
  width: 1000px;
  height: 600px;
}
#video {
  margin-left: 70px;
  margin-bottom: 20px;
}
#body {
  background-size: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
  background-color: #433f49;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 50px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>